<template>
  <div class="app-container">
    <div class="sidebar">
      <div class="add-btn" @click="addFoodItem">新增</div>
      <div class="add-btn" @click="saveFoodItems">保存</div>
      <div class="food-list">
        <div class="food-item" v-for="(item, index) in foodItems" :key="index.name">
          <input type="text" v-model="item.name" placeholder="请输入食物名称">
          <span class="delete-btn" @click="removeFoodItem(index)" style="float: right">×</span>
        </div>
        <div class="food-item" v-for="(food, index) in foods" :key="index">
          {{ food }}
          <span class="delete-btn" @click="removeFood(index)" style="float: right">×</span>
        </div>
      </div>
    </div>
    <div class="content">
      <el-button @click="decide" class="decide-btn" type="primary">决定</el-button>
      <el-card v-if="food" class="food-card">
        <div slot="header" class="clearfix">
          <span>今天吃什么？</span>
        </div>
        <div class="food-content">{{ food }}</div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      foods: [
        '汉堡', '披萨', '寿司', '面条', '炸鸡', '烧烤', '火锅', '牛排', '海鲜', '沙拉',
      ],
      food: '',
      foodItems: [],
    };
  },
  methods: {
    fetchFoods() {
      // 使用 axios 发送 GET 请求获取食物数据
      this.$axios.get('http://localhost:8181/food/foods')
        .then(response => {
          this.foods = response.data.data; // 将后端返回的数据赋值给 foods
        })
        .catch(error => {
          console.error(error);
        });
    },
    saveFoodItems() {
      const newFoods = this.foodItems.map(item => item.name);
      
      // 使用 axios 发送 POST 请求将新添加的食物数据保存到后端
      this.$axios.post('http://localhost:8181/food/saveFoods', { foods: newFoods })
        .then(response => {
          console.log(response.data.data); // 可根据后端返回的数据进行处理
          this.fetchFoods(); // 获取最新的食物数据
          this.foodItems = []; // 清空 foodItems
        })
        .catch(error => {
          console.error(error);
        });
    },
    addFoodItem() {
      this.foodItems.push({ name: '' });
    },
    removeFoodItem(index) {
      this.foodItems.splice(index, 1);
    },
    removeFood(index) {
  const food = this.foods[index];
    // 使用 axios 发送 DELETE 请求删除食物数据
    this.$axios.delete('http://localhost:8181/food/deleteFood', { data: food  })
      .then(response => {
        console.log(response.data.data); // 可根据后端返回的数据进行处理
        this.fetchFoods(); // 获取最新的食物数据
      })
      .catch(error => {
        console.error(error);
      });
  },
    decide() {
      const interval = 30; // 每隔300毫秒切换一次食物
      let currentIndex = Math.floor(Math.random() * this.foods.length); // 当前显示的食物索引

      const timer = setInterval(() => {
        this.food = this.foods[currentIndex];
        currentIndex = (currentIndex + 1) % this.foods.length; // 切换到下一个食物

        setTimeout(() => {
          clearInterval(timer); // 停止定时器
        }, 1000); // 1秒后停止切换
      }, interval);
    }
  },created() {
    this.fetchFoods(); // 在组件初始化时获取食物数据
  },
};
</script>


<style scoped>
.add-btn {
  margin-top: 10px;
  padding: 8px 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.delete-btn {
  font-size: 20px;
}

.app-container {
  display: flex;
  height: 97.1vh;
}

.sidebar {
  width: 200px;
  background-color: #f0f0f0;
  padding: 20px;
  overflow: auto; /* 添加这行代码 */
  max-height: 100%; /* 设置适当的高度 */
}

.food-list {
  margin-top: 20px;
}

.food-item {
  margin-bottom: 10px;
  border: 1px dashed #ccc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.content {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.decide-btn {
  margin-bottom: 20px;
}

.food-card {
  width: 300px;
}

.food-content {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
</style>
